<template>
    <div class="grant-dialog">
        <el-dialog v-model="grantDialogVisible" title="授权" width="40%" center
                   destroy-on-close
                   @close="$emit('update:show', false)"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form :model="grantForm"
                     :rules="grantFormRules"
                     ref="grantForm"
                     label-position="right"
                     label-width="100px">
                <el-form-item label="授权给">
                    <el-tag style="margin-right: 10px" size="small" v-for="u in grantForm.users" type="success">
                        {{ u.nickName }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="选择角色" prop="roleIds">
                    <el-select v-model="grantForm.roleIds" multiple :multiple-limit="2" placeholder="请选择角色">
                        <el-option v-for="r in roleData" :label="r.name" :value="r.id" :key="r.id"/>
                    </el-select>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="grantDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="doGrant">授权</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import roleReq from '@/services/role/request'
import accountReq from '@/services/account/request'

export default {
    name: "GrantDialog",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        datas: {
            type: Array
        }
    },
    watch: {
        show() {
            if (this.show) {
                this.grantDialogVisible = this.show
                // 请求角色列表
                this.loadRoles()
                this.grantForm.users = JSON.parse(JSON.stringify(this.datas))
                this.grantForm.roleIds = []
            }
        }
    },
    data() {
        return {
            grantDialogVisible: false,
            roleData: [],
            grantForm: {
                roleIds: [],
                users: [],
            },
            grantFormRules: {
                roleIds: [{required: true, message: '请选择角色', trigger: 'change'}]
            }
        }
    },
    methods: {
        async loadRoles() {
            let r = await roleReq.list()
            if (r.code === 0) {
                this.roleData = r.data
            } else {
                this.$message.error('加载角色列表失败，请稍后重试！')
            }
        },
        async doGrant() {
            if (!this.grantForm.users || this.grantForm.users.length < 1) {
                this.$message.warning('用户列表为空，请刷新后再试！')
                return
            }
            this.$refs['grantForm'].validate(async (valid) => {
                if (valid) {
                    let userIds = []
                    for (let i = 0; i < this.grantForm.users.length; i++)
                        userIds.push(this.grantForm.users[i].id)
                    let r = await accountReq.batchGrant({userIds: userIds, roleIds: this.grantForm.roleIds})
                    if (r.code === 0) {
                        this.$message.success('授权成功')
                        this.grantDialogVisible = false
                        this.$emit('finished')
                    } else {
                        this.$message.error('授权失败')
                    }
                } else {
                    return false
                }
            });
        }
    }
}
</script>